<template>
	<view class="index u-skeleton">
		<diy-scorll :Empty='goodsList.length ? false : true' :status = 'status' @scrolltolower='getgoods' @refresherrefresh='refresherrefresh'>
			<view class="diy-swiper u-skeleton-rect">
				<u-swiper :list="list" height='560' :autoplay="false" @click = "gotoswiper"></u-swiper>
			</view>
			<view class="center">
				<view class="left u-skeleton-rect" @click="gotolist('left_url')">
					<image :src="$util.img(navgation.left_image)" mode="widthFix"></image>
<!-- 					<image :src="$util.img('/static/img/index/人.png')" mode="widthFix" class="people"
						:class="ani ? 'ani1' : 'ani2'"></image> -->
				</view>
				<view class="right u-skeleton-rect">
					<image :src="$util.img(navgation.right_image)" mode="widthFix" @click="gotolist('right_url')"></image>
					<image :src="$util.img(navgation.right_images)" mode="widthFix" @click="gotolist('right_urls')"></image>
				</view>
			</view>
			<view class="title">热门推荐</view>
			<diy-goods :list='goodsList' @getgoods='getgoods'></diy-goods>
		</diy-scorll>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
		<diy-tabbar current="index"></diy-tabbar>
		<!-- 公告弹窗 -->
		<diy-shoping-tips  :show='tipsLoginShow' @callback='()=>tipsLoginShow = false'></diy-shoping-tips>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				//轮播图
				list: [],
				//加载
				loding: true,
				//tips做了一个延时效果，别问，问就是需求
				// playState: 'paused',
				//小人动画是否开始
				ani: true,
				//动画的定时器
				Interval: null,
				// 出现登录弹窗
				loginShow:false,
				// 公告弹窗
				tipsLoginShow:true,
				//商品列表
				goodsList:[],
				//加载配置
				page:{
					page:1,
					page_size:8,
				},
				//判断刷新出来滚动出现的文字
				status:'loadmore',
				//商品分类
				TypeList:[],
				//三个分类
				navgation:{}
			}
		},
		onLoad(option) {
			if(option.code) uni.setStorageSync('code',option.code)
			//#ifdef APP
			uni.hideTabBar()
			//#endif

		},
		onShow() {
				if(!uni.getStorageSync('tipsJudge')){
					this.tipsLoginShow = true;
					uni.setStorageSync('tipsJudge',1)
				}
			//开启动画
			this.playState = 'play';
			// 启动动画
			this.setani();
			//获取轮播图
			this.getswiper();
			//获取商品分类列表
			this.goodsTypeList();
			//获取三个分类
			this.getnavgation();
		},
		onHide() {
			this.playState = 'paused';
			this.loginShow = false;
			clearInterval(this.Interval);
		},
		methods: {
			//前往商品列表页面
			gotolist(name){
				let url = this.navgation[name]
				// #ifdef H5
				if(url.includes('http')){
					location.href = url;
				} else {
					if(url.includes('index/index') || url.includes('shopping/shopping') || url.includes('tidalcard/tidalCard') || url.includes('my/my')){
						this.$util.redirectTo(url,{},'switchTab')
					} else {
						url = url.split('?');
						let obj = {};
						if(url.length > 1){
							let arr = url[1].split('=');
							obj[arr[0]] = arr[1]
						}
						this.$util.redirectTo(url[0],obj)
					} 
				}
				// #endif
			},
			gotoswiper(index){
				// #ifdef H5
				if(this.list[index].url.includes('http')){
					location.href = this.list[index].url;
				} else {
					this.$util.redirectTo(this.list[index].url,{},()=>{
						if(url.includes('pages/index/index') || url.includes('pages/shopping/shopping') || url.includes('pages/tidalcard/tidalCard') || url.includes('pages/my/my')){
							return 'switchTab'
						}
					})
				}
				// #endif
			},
			// 销毁动画定时器
			setani() {
				this.Interval = setInterval(() => {
					this.ani = !this.ani;
				}, 1500)
			},
			// 下拉双薪
			refresherrefresh(callback){
				this.page = {
					page:1,
					page_size:8,
				},
				this.getswiper();
				this.getgoods(callback);
			},
			getswiper(){
				this.$http.asyncSendrequest({
					url:'/common/banner',
					data:{
						type:1
					},
					success:res=>{
						if(res.code == '0') {
							this.list = res.data.map(item=>{
								item.image = item.icon;
								return item ;
							});
						}
					}
				})
			},
			//获取三个导航
			getnavgation(){
				this.$http.asyncSendrequest({
					url:'/common/navigation',
					success:res=>{
						if(res.code == '0') {
							this.navgation = res.data;
						}
					}
				})
			},
			// 或许商品列表
			getgoods(callback){
				this.$http.asyncSendrequest({
					url:'/goods/goodsList',
					data:{
						type:1,
						...this.page
					},
					success:res=>{
						if(res.code == '0') {
							if(this.page.page == 1) this.goodsList = [];
							if(res.data.length){
								this.goodsList = this.goodsList.concat(res.data);
								this.page.page += 1;
							} else {
								//下面加载的文字
								this.status = 'nomore'
							}
							if(typeof callback == 'function') callback();
							this.loding = false;
						}
					}
				})
			},
			//获取商品分类
			goodsTypeList(){
				this.$http.asyncSendrequest({
					url:'/goods/goodsTypeList',
					success:res=>{
						if(res.code == '0') {
							this.TypeList = res.data;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		/deep/ .u-indicator-item-round-active {
			background: #000000 !important;
		}

		.roll {
			margin-top: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: calc(100% - 196rpx);
				height: 140rpx;
			}

			.right {
				width: 176rpx;
				height: 140rpx;
				padding: 10rpx 22rpx 0 0;
				box-sizing: border-box;
				margin-left: 20rpx;

				.r-top {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #292929;
					text-align: center;
					margin: 0 auto;

					.r-num {
						color: red;
						font-size: 34rpx;
					}
				}

				.r-bottom {
					margin: 0 auto;
					width: 135rpx;
					height: 40rpx;
					border: 1rpx solid #000000;
					border-radius: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		.center {
			margin: 38rpx 30rpx 0;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 320rpx;
				height: 400rpx;
				position: relative;

				image {
					width: 100%;
				}

				.people {
					width: 60rpx;
					position: absolute;
					bottom: 20rpx;
					left: 20rpx;

				}

				.ani1 {
					animation: myfirst 1.5s;
				}

				.ani2 {
					transform: rotateY(180deg);
					animation: myfirstHover 1.5s;
				}
			}

			.right {
				width: 330rpx;
				height: 400rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;

				image {
					width: 100%;
				}
			}
		}

		.title {
			margin: 46rpx 30rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #292929;
		}
	}

	@keyframes myfirst {
		0% {
			left: 20rpx;
			bottom: 20rpx;
		}

		25% {
			left: 70rpx;
			bottom: 40rpx;
		}

		50% {
			left: 130rpx;
			bottom: 20rpx;
		}

		75% {
			left: 190rpx;
			bottom: 40rpx;
		}

		100% {
			left: 240rpx;
			bottom: 20rpx;
		}
	}

	@keyframes myfirstHover {
		0% {
			left: 240rpx;
			bottom: 20rpx;
		}

		25% {
			left: 190rpx;
			bottom: 40rpx;
		}

		50% {
			left: 130rpx;
			bottom: 20rpx;
		}

		75% {
			left: 70rpx;
			bottom: 40rpx;
		}

		100% {
			left: 20rpx;
			bottom: 20rpx;
		}
	}
</style>